<script setup>
    import dayjs from 'dayjs'
    import { ref, reactive } from 'vue'
    import Type from '@components/search/type'
    import Search from '@components/search/index'
    import PageWrapper from '@components/PageWrapper.vue'
    import { common, service } from '@utils'
    import TitleValue from '@components/TitleValue'
    import { useRoute } from 'vue-router'
    import { View } from '@element-plus/icons-vue'
    import { usePremission } from '@hooks'

    const data = ref()

    const route = useRoute()

    const premission = usePremission({
        view: 'bfqz:order:view'
    })

    let queryForm = reactive({
        time: [],
        orderStatus: ''
    })
    let aaa = reactive([])
    let end = new Date().getTime()
    let start = new Date().getTime() - 3600 * 1000 * 24 * 6
    end = dayjs(end).format('YYYY-MM-DD 23:59:59')
    start = dayjs(start).format('YYYY-MM-DD 00:00:00')
    queryForm.time = [start, end]
    const searchs = ref([
        {
            type: Type.DATE_RANGE,
            width: 8,
            key: 'time',
            default: queryForm.time
        },
        {
            type: Type.SELECT,
            key: 'leaseMethod',
            width: 5,
            placeholder: '产品类型',
            valueKey: 'val',
            data: []
        },
        {
            type: Type.SELECT,
            key: 'orderStatus',
            width: 5,
            placeholder: '订单状态',
            valueKey: 'val',
            data: queryForm.orderStatus,
            default: queryForm.orderStatus
        },
        {
            width: 6,
            type: Type.SEARCH_EXPORT_BUTTON
        }
    ])

    const pageRef = ref()
    const tableRef = ref()
    const detailRef = ref()
    const riskRef = ref()

    const expressMethods = ref()
    const expressCompanys = ref()
    // const orderType = ref()
    const yesNo = ref()
    const sonStatuss = ref()

    const numLine = ref(1)
    const onLineNum = (num) => {
        numLine.value = num
    }
    const onSearch = (param) => {
        queryForm = param
        pageRef.value.refresh()
    }

    const exportData = async (query) => {
        query = { ...query }
        if (query.time && query.time.length > 0) {
            query.rentStartTime = query.time[0]
            query.rentEndTime = query.time[1]
            delete query.time
        }
        query.fileName = '资金流水.xlsx'
        const res = await service.fund.getCompamyLableExport(query)
        res && common.export(res, query.fileName)
    }

    const getData = async ({ pageNum, pageSize }, cb) => {
        const query = { ...queryForm }
        if (query.time && query.time.length > 0) {
            query.rentStartTime = query.time[0]
            query.rentEndTime = query.time[1]
            // query.orderStatus = ""
            delete query.time
        }
            const res = await service.fund.getCompamyLable(pageNum, pageSize, query)
            cb(res)
        setTimeout(() => {
            tableRef.value.scrollTo(0, 0)
        }, 0)
    }

    const getStatuss = async () => {
        const res = await service.sys.dictionaryAll()
        if (res) {
            let statuss = null
            let productType = null
            for (let i = 0; i < res.length; i++) {
                if (res[i].code === 'financialOrdeState') {
                    statuss = res[i].list
                }else if(res[i].code === 'productType') {
                    productType = res[i].list
                }
            }
            searchs.value[2].data = statuss
            searchs.value[1].data = productType
        }
    }

    const getDataStatements = async (query) => {}

    getStatuss()

    const width = (function (premission) {
        let width = 24
        premission.view && (width += 33 * 2)
        return Math.max(width, 72)
    })(premission)
</script>
<template>
    <section class="main-white">
        <search @export="exportData" :items="searchs" @filter="onSearch" @onLineNum="onLineNum" :on-load="true" />
        <page-wrapper @get-data="getData" ref="pageRef" :on-load="true">
            <template v-slot:default="props">
                <vxe-table
                    class="mytable-scrollbar"
                    ref="tableRef"
                    :loading="false"
                    :data="props.tableData.records"
                    :max-height="common.tableHeight(true, numLine)"
                    highlight-hover-row
                    round
                    stripe
                    border
                >
                    <vxe-column type="seq" width="50" fixed="left"></vxe-column>
                    <!-- <vxe-column
                            field="goodsContent"
                            title="产品"
                            show-overflow="tooltip"
                            width="160"
                        />
                        <vxe-column title="订单状态" width="150">
                            <template #default="{ row }">
                                <el-tag>
                                    {{
                                        common.getValueByKey('val', row.state, searchs[2].data, 'label')
                                    }}
                                </el-tag>
                            </template>
                        </vxe-column> -->
                    <vxe-colgroup title="收到分账信息">
                        <vxe-column
                            field="conpanyAccount"
                            title="分账流水号/分账类型/金额"
                            width="360"
                        ></vxe-column>
                    </vxe-colgroup>
                    <vxe-colgroup title="平台信息" >
                        <vxe-column
                            field="platformAccount"
                            title="分账流水号/类型/金额"
                            width="360"
                        ></vxe-column>
                    </vxe-colgroup>
                    <vxe-colgroup title="分账" >
                        <vxe-column
                            field="balanceTime"
                            title="平台分账时间"
                            width="120"
                        ></vxe-column>
                        <vxe-column
                            field="beforeBalanceAmount"
                            title="分账前金额"
                            width="120"
                        ></vxe-column>
                        <vxe-column
                            field="afterBalanceAmount"
                            title="分账后金额"
                            width="120"
                        ></vxe-column>
                    </vxe-colgroup>
                    <vxe-colgroup title="支付交易数据">
                        <vxe-column field="tradeNo" title="支付流水单号" width="160"></vxe-column>
                        <!-- <vxe-column field="payType" title="支付流水类型" width="60"></vxe-column> -->
                        <vxe-column field="amount" title="支付金额" width="90"></vxe-column>
                        <!-- <vxe-column field="createDate" title="创建时间" width="120"></vxe-column> -->
                        <vxe-column field="payTime" title="支付完成时间" width="120"></vxe-column>
                    </vxe-colgroup>
                    <vxe-colgroup title="消费者订单数据">
                        <vxe-column field="orderId" title="订单编号" width="160"></vxe-column>
                        <vxe-column field="userId" title="用户ID" width="160"></vxe-column>
                        <vxe-column field="userName" title="姓名" width="90"></vxe-column>
                        <vxe-column field="goodsContent" title="产品" width="160"></vxe-column>
                        <vxe-column field="splitNum" title="分期期数" width="90"></vxe-column>
                        <!-- <vxe-column v-if="activeName == '未分账流水'" field="price" title=" 订单最后确认时间" width="90"></vxe-column> -->
                        <vxe-column field="price" title="总租金" width="90"></vxe-column>                        <vxe-column field="marketPrice" title="市场价" width="90"></vxe-column>

                    </vxe-colgroup>
                    <!-- <vxe-column title="操作" width="50" fixed="right">
                            <template #default="{ row }">
                                <section class="flex-align flex-wrap">
                                    <el-tooltip
                                        v-if="premission.view"
                                        effect="dark"
                                        content="详情"
                                        placement="top"
                                        :enterable="false"
                                    >
                                        <el-button
                                            type="primary"
                                            circle
                                            plain
                                            :icon="View"
                                            size="small"
                                            @click="detailRef.open(row)"
                                        ></el-button>
                                    </el-tooltip>
                                </section>
                            </template>
                        </vxe-column> -->
                </vxe-table>
            </template>
        </page-wrapper>
    </section>
</template>
<style lang="scss" scoped>
    :deep(.el-button + .el-button) {
        margin-left: 10px;
    }
    :deep(.is-active) {
        background: white;
    }
    .main-white {
        background: #f1f3f6;
    }
    .main-all {
        display: flex;
        justify-content: space-between;
        background: #f5f5f5;
        background: #f1f3f6;
        margin-bottom: 20px;
        .main-all-item {
            background: #ffffff;
            width: 300px;
            height: 200px;
            border-radius: 8px;
            display: inline-flex;
            flex-direction: column;
            align-items: left;
            justify-content: center;
            padding-left: 40px;
        }
    }
    /*滚动条整体部分*/
    .mytable-scrollbar ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    /*滚动条的轨道*/
    .mytable-scrollbar ::-webkit-scrollbar-track {
        background-color: #ffffff;
    }
    /*滚动条里面的小方块，能向上向下移动*/
    .mytable-scrollbar ::-webkit-scrollbar-thumb {
        background-color: #bfbfbf;
        border-radius: 5px;
        border: 1px solid #f1f1f1;
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    }
    .mytable-scrollbar ::-webkit-scrollbar-thumb:hover {
        background-color: #a8a8a8;
    }
    .mytable-scrollbar ::-webkit-scrollbar-thumb:active {
        background-color: #787878;
    }
    /*边角，即两个滚动条的交汇处*/
    .mytable-scrollbar ::-webkit-scrollbar-corner {
        background-color: #ffffff;
    }
</style>
